<template>

  <div class="deposit_bar">
    <img src="/assets/images/deposit1.png" alt="">
    <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>账户余额：￥ {{business.money}}</span>
    </div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>用户：{{business.nickname}}</span>
    </div>
  </div>

  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>

  <!-- 支付方式 -->
  <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true"></van-cell>

  <van-field 
      v-model="money"
      label="充值金额"
      name="money"
      placeholder="请填写充值金额"
      left-icon="gold-coin-o"
      required
      :rules="[{ required: true, message: '请填写充值金额' }]"
      @touchstart.stop="keyboardshow = true"
  />

  <div class="button">
    <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" @click="recharge">立即充值</van-button>
  </div>

  <van-number-keyboard
    v-model="money"
    :show="keyboardshow"
    :maxlength="6"
    @blur="keyboardshow = false"
    close-button-text="完成"
    theme="custom"
    :extra-key="['.']"
    :z-index="9999"
    />
    <!-- 支付方式的选择器 -->
  <van-popup v-model:show="PayShow" position="bottom">
    <van-picker
      title="选择支付方式"
      :columns="PayList"
      @cancel="PayShow = false"
      @confirm="PayConfirm"
    />
  </van-popup>
  <Tabbar />
</template>

<script setup>
import { onBeforeMount } from "vue"

  const {proxy} = getCurrentInstance()
  const business = proxy.$business

  //支付方式
  let PayShow = ref(false)
  let PayActive = ref({})
  let PayList = ref([])
  onBeforeMount(()=>{
    getPayList()
  })
  const getPayList = async()=>{
    let result = await proxy.$GET({url:'/business/recharge',params:{get:'pay'}})
    PayActive.value = []
    Object.keys(result.data).forEach((key) => {
      PayList.value.push({text: result.data[key], value:key })
    })
    PayActive.value = PayList.value[0]
  }
  //确认支付方式
  const PayConfirm = ({selectedOptions}) => 
  {
    PayShow.value = false
    PayActive.value = selectedOptions[0]
  }
  const money = ref(0)
  const keyboardshow = ref(false)
  const recharge = async()=>{
    let result = await proxy.$POST({url:'/business/recharge',data:{
      money:money.value,
      pay:PayActive.value.value
    }})
    if(result.code==1){
      proxy.$router.push({path:`/cart/cashier`,query:{payid:result.data,type:'recharge'}})
    }else{
      showFailToast(result.msg)
    }
  }
</script>

<style scoped>
  @import url('/assets/css/BusinessPay.css');
</style>